<template>
  <j-modal title="编辑工作小组" :width="1100" :visible="visible" switchFullscreen :footer="null" @cancel="handleCancel" @ok="handleOk">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="onAdd()">添加小组成员</a-button>
    </div>
    <!-- 表格展示 -->
    <div class="table-page-content">
      <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
        :dataSource="pageData" @change="onTableChange">
        <template slot="memberType" slot-scope="text">
          <span v-if="text == '1'">组长</span>
          <span v-if="text == '2'">成员</span>
        </template>
        <template slot="gender" slot-scope="text">
          <span v-if="text == '1'">男</span>
          <span v-if="text == '2'">女</span>
        </template>
        <template slot="post" slot-scope="text">
          <span>{{ setTittle(text) }}</span>
        </template>
        <!--操作-->
        <template slot="action" slot-scope="text, record">
          <a-button @click="onEdit(record)" type="link" style="padding: 0">编辑</a-button>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </z-table>
      <AddUserModal2 ref="addUserModalId2" @ok=onQuery :title=title />
    </div>
  </j-modal>
</template>
<script>
import * as groupApi from '@/api/sjsk/groupManage.js'
import { getDictItemsFromCache } from '@/api/api'
import AddUserModal2 from './AddUserModal2'
export default {
  name: 'AddModal',
  components: { AddUserModal2 },
  data() {
    return {
      visible: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '成员',
          dataIndex: 'memberType',
          align: 'center',
          scopedSlots: { customRender: 'memberType' },
        },
        {
          title: '工作单位及职务或身份',
          dataIndex: 'post',
          align: 'center',
          scopedSlots: { customRender: 'post' },
        },
        {
          title: '姓名',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'gender',
          align: 'center',
          scopedSlots: { customRender: 'gender' },
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'center',
        },
        // {
        //   title: '身份证号',
        //   dataIndex: 'identification',
        //   align: 'center',
        // },
        {
          title: '联系方式',
          dataIndex: 'telphone',
          align: 'center',
        },
        {
          title: '操作',
          width: 160,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      postArr: getDictItemsFromCache('groupPost'),
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      title: "",
      groupId: ""
    }
  },
  async created() {

  },
  methods: {
    show(record) {
      this.visible = true
      this.groupId = record.id  //小组id
      this.pageFilter.id = record.id
      this.pageFilter.type = record.type
      this.onQuery()
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      groupApi.viewGroupMembers(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onAdd() {
      this.title = "添加小组成员"
      this.$refs.addUserModalId2.show(1, this.groupId) //传入小组id
    },
    onEdit(record) {
      this.title = "编辑小组成员"
      this.$refs.addUserModalId2.show(2, this.groupId, record)
    },
    onDelete(record) {
      groupApi.appointDeleteGroup({ groupId: this.pageFilter.id, teamerId: record.id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.onQuery()
        } else {
          this.$message.warn(res.message)
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    setTittle(text) {
      return this.$filterDictTextByCache('groupPost', text)  //现在字典中对应的文字，是全局函数
    },

    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    }
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-form-item {
  margin-bottom: 10px;
}
</style>
